<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Real time views counter</title>
    
    <style type="text/css">
        body, h1 { margin:0;padding:0; }
        .space-line {clear:both;}
        .box    {color:black;
                width:inherit;
                height:85%;
                overflow:scroll;
                font-size:inherit;
                background-color:#E9E9E9;
                font-family: "Monotype";
                margin:0; padding:0;}

        .header{font-family:inherit; font-size:inherit;background-color:lightgrey;width:inherit;}
        .boxh    {background-color:lightgrey;
                width:inherit;
                font-size:10pt;
                font-family:monospace;
                height:100%;
                float:left;}
        .margin{width:10px;float:left;
                height:inherit;
                }
        #inputbox{width:580px;float:left;}
        #inputbox2{width:130px;float:left;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://comet.${domain}/_/comet.js"></script> 
</head>
  
<body>
    <script>
    /* yep. we have to change document.domain */
    document.domain = extract_xss_domain(document.domain);
        
    var channel_id = '';
    var gc;
    function get_comet_uri(){
        return('/comet/'+ channel_id + '/listen?z='+Math.random());
    }
    
    update_scheduled = false;
    /* receive the channel_id from the server */
    function update_uri() {
        var xhr;
        function ajax_callback(){
            if(xhr.readyState != 4)
                return;
            if(xhr.status != 200){
                //alert('failed to get channel_id. is google working?');
                setTimeout('update_uri()', 1000*30);
                update_scheduled = false;
                return;
            }
            var r = false;
            if(xhr.responseText){
                var j = eval('(' + xhr.responseText + ')');// json here
                if(channel_id != j.channel_id){
                    channel_id = j.channel_id;
                    max_id = j.max_id;
                    set_counter(j.counter);
                    if(gc)
                        gc();
                    gc = comet_schedule_crossdomain('http://comet.${domain}/_/iframe.html?a=a', get_comet_uri, comet_callback);
                }
            }
            update_scheduled = false;
        };
        if(update_scheduled)
            return;
        if(xhr)
            xhr.abort();
        xhr = create_xhr();
        xhr.onreadystatechange = ajax_callback;
        xhr.open('GET', '/usercounter/channel_uri?a=' + Math.random(), true);
        xhr.send(null);
        update_scheduled = true;
    }
    update_uri();
    
    function set_counter(counter){
        var ta = document.getElementById('counter');
        ta.innerHTML = counter;
    }
    
    function comet_callback(data){
        var a = data.split(' ');
        var id    = a[0];
        var owner = a[1];
        
        /* system messages */
        if(id == 'connected'){
            return;
        }
        if(id == 'ping'){
            return;
        }
        if(id == 'destroyed'){
            channel_id = '';
            /* you can't just do update_uri() due to bug in safari */
            setTimeout("update_uri();", 500);
            return;
        }
        
        /* user event */
        var data  = a.slice(2).join(' ');
        set_counter(data);
    }
    </script>
    
    
    Real-time counter of this page views:<br />
    <div id="counter"></div>It's increased every time when someone views this site.<br />
    
    <br />
    Consider opening this page in another browser to see the counter changes.
    
    <br />
    <br />
    <br />
    <div>
        You should know that:
        <ul>
            <li>this website is hosted on <a href="http://code.google.com/appengine/">Google App Engine</a></li>
            <li>it's using external <a href="http://movq.net">comet service</a></li>
            <li>the sources are <a href="http://code.google.com/p/gae-services-examples/source/browse">availbe public</a></li>
        </ul>
    </div>

</body>
</html>
